<!DOCTYPE html>
<html lang="en">
<head>
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="../css/2580.css">
	<style type="text/css">
	#thediv {
            z-index: 100;
            position: absolute;
            top: 43px;
            left: 2px;
            height: 200px;
            width: 200px;
            background-image: url(../img/2586.jpg);
        }</style>
    </style>
	 <script type="text/javascript">
        var xPos = 300;
        var yPos = 200;
        var step = 1;
        var delay = 8;
        var height = 0;
        var Hoffset = 0;
        var Woffset = 0;
        var yon = 0;
        var xon = 0;
        var pause = true;
        var interval;
 
        function changePos() {
            width = document.documentElement.clientWidth;
            height = document.documentElement.clientHeight;
            //现在js中可以直接通过ID名去操纵DOM，建议使用js选择器先选择 如：var thediv = document.getElementById('thediv');
            Hoffset = thediv.offsetHeight;
            Woffset = thediv.offsetWidth;
            thediv.style.left = (xPos + document.body.scrollLeft + document.documentElement.scrollLeft) + "px";
            thediv.style.top = (yPos + document.body.scrollTop + document.documentElement.scrollTop) + "px";
            if (yon) {
                yPos = yPos + step;
            }
            else {
                yPos = yPos - step;
            }
            if (yPos < 0) {
                yon = 1;
                yPos = 0;
            }
            if (yPos >= (height - Hoffset)) {
                yon = 0;
                yPos = (height - Hoffset);
            }
            if (xon) {
                xPos = xPos + step;
            }
            else {
                xPos = xPos - step;
            }
            if (xPos < 0) {
                xon = 1;
                xPos = 0;
            }
            if (xPos >= (width - Woffset)) {
                xon = 0;
                xPos = (width - Woffset);
            }
        }
        function start() {
            thediv.visibility = "visible";
            interval = setInterval(changePos, delay);
        }
        function pause_resume(bool) {
            pause = bool;
            if (pause) {
                clearInterval(interval);
                pause = false;
            }
            else {
                interval = setInterval(changePos, delay);
                pause = true;
            }
        }
        window.onload = function () {
            thediv.style.top = yPos;
            start();
        }
    </script>
</head>
<body>
	<div class="all"><!--flex纵向布局--> 
		<div id=win style="display:none; POSITION:absolute; left:50%; top:50%; width:300px; height:200px; margin-left:-300px; margin-top:-200px; border:1px solid #888;  text-align:center">欢迎登录小黑屋<br>
		<form>
	用户：
	<input type="text" name="user">
	<br/>
	密码：
	<input type="password" name="password">
	</form>
		<a href="javascript:closeLogin();">
<button> 退出</button></a>
<a href="javascript:closeLogin();">
<button> 登录</button></a>
</div>
		<div id="thediv" onmouseover="pause_resume(true)" onmouseout="pause_resume(false)"></div>
		<div class="tou"><!--flex纵向布局--> 
			<div class="one"><!--flex横向布局--> 
				<a class="u" href="">logo</a><!--图片-->
				<p class="u">选择学校 <select>
					<option>家里蹲大学</option>
					<option>社会大学</option>
					<option>监狱大学</option>
					<option>8F201渣男大学</option>
					<option>渣女大学</option>
				</select></p><!--可选择高校--> 
				<a class="u" href="">首页</a>
				<a class="u" href="">我有闲置</a>
				<a class="u" href="">我要租借</a>
				<a class="u" href="">客服</a>
				<a class="u" href="">热线电话</a>
				<a class="u" href="javascript:openLogin();">登录</a>
			</div>
				<div class="two">
					 <div id="box">
	       			 	<input type="text" name="search" placeholder="请输入关键字"><!--搜索框-->
	        			<div id="search" >搜索</div> 
	    			</div>
				</div>
		</div>
		<div class="zhong">
			<div class="daohang">
				<ul><!--导航栏-->
				    <li class="dao"><p class="zhiti"><font size="6" class="hh">常用品</font></p></li> 
				    <li class="dao"><p class="zhiti"><font size="6" class="hh">食品</font></p></li>
				    <li class="dao"><p class="zhiti"><font size="6" class="hh">洗护</font></p></li>
				    <li class="dao"><p class="zhiti"><font size="6" class="hh" id="hh1">家电</font></p></li>
				</ul>
				<div><!--导航div-->
					<div class="tuo"><div id="p">
<div class="img">
  <a href="./6.html"><img src="../img/imgq.jpg" alt="Ballade" width="160" height="160">
  <div class="desc">卫生纸</div></a>
</div>

<div class="img">
  <a href="">
  <img src="../img/imgr.jpg" alt="Ballade" width="160" height="160">
  <div class="desc">洗衣</div></a>
</div>

<div class="img">
  <a href="">
 <img src="../img/imgs.jpg" alt="Ballade" width="160" height="160">
  <div class="desc">洗洁精</div> </a>
</div>

<div class="img">
  <a href="">
<img src="../img/imgt.jpg" alt="Ballade" width="160" height="160">
  
  <div class="desc">垃圾袋</div></a>
</div>

<div class="img">
  <a href="./4.html">
<img src="../img/4.jpg" alt="Ballade" width="160" height="160">
  
  <div class="desc">垃圾桶</div></a>
</div>

<div class="img">
  <a href="">
<img src="../img/imgw.jpg" alt="Ballade" width="160" height="160">
  <div class="desc">洁厕</div></a>
</div>
</div></div>
					<div class="tuo e"><div id="p">
<div class="img">
  <a href=""><img src="../img/1.jpg" alt="Ballade" width="160" height="160">
  <div class="desc">蛋糕</div></a>
</div>

<div class="img">
  <a href="">
  <img src="../img/imga.jpg" alt="Ballade" width="160" height="160">
  <div class="desc">奶昔</div></a>
</div>

<div class="img">
  <a href="">
 <img src="../img/imgb.jpg" alt="Ballade" width="160" height="160">
  <div class="desc">果干</div> </a>
</div>

<div class="img">
  <a href="./2.html">
<img src="../img/imgc.jpg" alt="Ballade" width="160" height="160">
  
  <div class="desc">饼干</div></a>
</div>

<div class="img">
  <a href="">
<img src="../img/imgd.jpg" alt="Ballade" width="160" height="160">
  
  <div class="desc">方便面</div></a>
</div>

<div class="img">
  <a href="">
<img src="../img/imge.jpg" alt="Ballade" width="160" height="160">
  <div class="desc">植物油</div></a>
</div>
</div></div>
					<div class="tuo e"><div id="p">
<div class="img">
  <a href="./3.html"><img src="../img/2.jpg" alt="Ballade" width="160" height="160">
  <div class="desc">香皂</div></a>
</div>

<div class="img">
  <a href="">
  <img src="../img/imgf.jpg" alt="Ballade" width="160" height="160">
  <div class="desc">洗发水</div></a>
</div>

<div class="img">
  <a href="">
 <img src="../img/imgg.jpg" alt="Ballade" width="160" height="160">
  <div class="desc">婴儿沐浴露</div> </a>
</div>

<div class="img">
  <a href="">
<img src="../img/imgh.jpg" alt="Ballade" width="160" height="160">
  
  <div class="desc">牙膏</div></a>
</div>

<div class="img">
  <a href="">
<img src="../img/imgi.jpg" alt="Ballade" width="160" height="160">
  
  <div class="desc">保湿乳</div></a>
</div>

<div class="img">
  <a href="./5.html">
<img src="../img/imgj.jpg" alt="Ballade" width="160" height="160">
  <div class="desc">眼影</div></a>
</div>
</div></div>
					<div class="tuo e"> <h1>看什么看</h1>
						<h1>老板不进货啊</h1>
						<h1>我也很难过</h1></div>
				</div>
			</div>
		</div>
		<div class="wei">
			<p class="wei1">
				<d>天使集团</d>
				<d>|</d>
				<d>关于小黑屋</d>
				<d>|</d>
				<d>合作伙伴</d>
				<d>|</d>
				<d>廉正举报</d>
				<d>|</d>
				<d>法律声明</d>
				<d>|</d>
			</p>
			<p class="wei2">
				<d>董事长：钢铁侠</d>
				<d>|</d>
				<d>CEO：美国队长</d>
				<d>|</d>
				<d>总经理：黑寡妇</d>
				<d>|</d>
				<d>产品经理：幻视</d>
				<d>|</d>
				<d>人力资源总监：绯红女巫</d>
				<d>|</d>
			</p>
			<p class="wei3">
				<d>本网站由复仇者联盟独家赞助</d>
				<d>|</d>
				<d>本网站出售产品均为战争所得（三无产品）</d>
				<d>|</d>
			</p>
		</div>
	</div>	


	<script type="text/javascript">
		 var dao=document.getElementsByClassName('dao')/*  导航按钮*/
		 var dao1=document.getElementsByClassName('tuo')
		 function openLogin(){
   document.getElementById("win").style.display="";
}
function closeLogin(){
   document.getElementById("win").style.display="none";
}
		 for (var i = dao.length - 1; i >= 0; i--) {
		 	dao[i].index=i;
		 	dao[i].onclick=function(){
		 		for (var j = dao.length - 1; j >= 0; j--) {
		 			dao[j].className="";
		 		}
		 		this.className="dao d";
		 		for (var i = dao1.length - 1; i >= 0; i--) {
		 			dao1[i].style.display="none";
		 		}
		 		dao1[this.index].style.display="block";
		 	}
		 }/*  导航按钮*/
		 /* 搜索弹出窗口*/
		 $(document).ready(function(){
		 	$('#search').click(function(){
		 		alert("别点了！！啥都没有！！")
		 	})
		 })
	</script>	
</body>
</html>